<template>
	<div class="indexHeader">
		<!-- 搜索 -->
		<div class="search">
			<i class="icon-search" ></i>
			<input type="text" v-model="searchName" placeholder="学成在线">
		</div>
		<!-- 轮播图 -->
		<mt-swipe :auto="3000">
          <mt-swipe-item><img src="holder.js/100px300"></mt-swipe-item>
          <mt-swipe-item><img src="holder.js/100px300"></mt-swipe-item>
          <mt-swipe-item><img src="holder.js/100px300"></mt-swipe-item>
      		<mt-swipe-item><img src="holder.js/100px300"></mt-swipe-item>
    	</mt-swipe>
	</div>
</template>
<script>
	export default {
		data: function () {
			return {
				searchName: '',
				width: '',
				msg: '搜索页面',
				imgBaseUrl: ''
			};
		}
	}
</script>
<style lang="scss">
  @import "../assets/baseScss";
  .indexHeader{
    height: 200px;
    position: relative;
  }
  .indexHeader{
    .search{
      position: absolute;
      z-index: 99;
      width: 90%;
      left: 5%;
      top:10px;
      background: rgba(255, 255, 255, 0.9);
      color:$cl4;
      line-height: 35px;
      input{
        height: 35px;
        width: 65px;
        line-height: 35px;
        background: transparent;
        border: none;
        font-size: 16px;
        padding:0 1px;
      }
      input:focus{
        outline:medium;
        width: 85%;
      }
      i:before{
        position: relative;
        font-size: 16px;
        top:1px;
        left: 3px;
      }
    }
  }
</style>